[Day12] flexbox align-self

12th鐵人賽 css flexbox

placeholder name

2020-09-27 21:58:05

4283 瀏覽

分享至

align-self 和 align-items 和 align-content 的關係，屬性大同小異，差別就像是只操控單一個、操控每個單行、操控整體。

self 又有自己、自我的意思，所以 align-self 很明顯的這個屬性是用來操控單個彈性項目的對齊。

align-self

.container {
    align-self: auto | stretch | flex-start | center | flex-end | baseline 
}
預設：auto

英文小幫手：

align 有調整、對齊的意思（專注於相交軸）
self 自我、自己的意思
stretch 有拉伸、伸展的意思
start 開頭
center 中間
end 尾巴
baseline 基線，代表的是文字的底部

範例

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 240px;
    height: 240px;
    background-color: #a5def5;
    margin: 120px;
  }
  .item{
    margin: 10px;
    width: 40px;
    height: 40px;
    background-color: #00A0E9;
    color: white;
  }
  .my-item{
    align-self: auto; /*改變屬性值來看看變化*/
  }
</style>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item my-item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
  </div>
</body>

其實只是覆寫 align-items

align-self 的屬性值其實很簡單，預設上 auto 的意思就是繼承在彈性容器 container 中的 align-items 所設定的屬性值，其他除了 auto 以外的的屬性值都和 align-items 相同，只是操控的對象變成單一個彈性項目，並且在對彈性項目給予 align-self 屬性值時其實就是覆寫被選擇項目在 align-items 的值。如果忘記 align-self 的屬性值是做什麼的，可以回顧第10天 align-items，因為是一樣的。

所以如果你發現你使用 align-self 沒有作用時，不妨看看你在彈性項目寫的屬性值是不是和在彈性容器的一樣，或著是使用了 stretch 、flex-start 這些常常讓人誤以為沒有作用的屬性值。

資料來源：